<template>
  <div>
    <el-page-header @back="goBack" content="学校计划测评进度"></el-page-header>
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="overview">
          分发人次
          <p><span>{{this.evaluate_number}}</span>人次</p>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="overview">
          已完成
          <p><span>{{this.evaluate_completed_number}}</span>人次</p>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="overview">
          未完成
          <p><span>{{this.not_finished_number}}</span>人次</p>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="overview">
          完成率
          <p><span>{{this.completion_rate}}</span>%</p>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="4">
        <el-select v-model="conditions.section_id" placeholder="请选择学端" size="small" @change="gradeOptionsFn">
          <el-option v-for="item in sectionOptions" :key="item.id" :label="item.title" :value="item.id">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select v-model="conditions.grade_id" placeholder="请选择年级" size="small" @change="classOptionsFn">
          <el-option v-for="item in gradeOptions" :key="item.id" :label="item.title" :value="item.id">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select v-model="conditions.class_id" placeholder="请选择班级" size="small">
          <el-option v-for="item in classOptions" :key="item.id" :label="item.title" :value="item.id">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4"><el-input v-model="conditions.real_name" placeholder="请输入学生姓名" size="small"></el-input></el-col>
      <el-col :span="2"><el-button type="primary" size="small" @click="searchFn">搜索</el-button></el-col>
    </el-row>
    <el-row class="btnBox">
      <el-col v-if="menuList.includes('addSchoolEva')" :span="3" :offset="18"><el-button type="primary" size="small" @click="addFn">添加测评对象</el-button></el-col>
      <el-col v-if="menuList.includes('exportEepEva')" :span="3"><el-button type="primary" size="small" @click="exportFn()">导出未完成名单</el-button></el-col>
    </el-row>
    <div class="table">
      <simple-table :tableConfig="tableConfig" :tableData="tableData" @operation="goToOperation"></simple-table>
    </div>
    <add-progress v-if="isAddProgress" :isAddProgress="this.isAddProgress" :id="this.id" :schoolId="this.schoolId" @noAddProgress="noAddProgress"></add-progress>
    <el-dialog title="详情" :visible.sync="dialogVisible" width="30%" :before-close="handleClose" :close-on-click-modal='false'>
      <div v-for="item in dialogList" :key="item.id">
        <el-button type="text" @click="checkReport(item)">{{item.title}}</el-button>
      </div>
    </el-dialog>
    <el-dialog title="下载" :visible.sync="dialogVisible2" width="30%" :before-close="handleClose" :close-on-click-modal='false'>
      <div v-for="item in downloadList" :key="item.id">
        <el-button type="text" @click="downloadListFn(item.id)">{{item.title}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import downloadApi from '@/common/downloadApi.js'
import simpleTable from '@/components/table.vue'
import addProgress from './addProgress.vue'
import {APISCHOOLPLANGETEVALUATIONPROGRESS, APIGETSECTIONLIST, APIGETGRADELIST, APIGETCLASSLIST, APISCHOOLPLANCHECKEXPORTUNFINISHED, APIGETDOWNLOADREPORTPATH} from '@/common/api.js'
export default {
  components: {
    simpleTable,
    addProgress
  },
  data () {
    return {
      menuList: [],
      api: '',
      id: '',
      schoolId: '',
      isAddProgress: false,
      dialogVisible: false,
      dialogVisible2: false,
      dialogList: [],
      downloadList: [],
      sectionOptions: [],
      gradeOptions: [],
      classOptions: [],
      tableConfig: {
        load: false,
        size: 'small', // 表格大小
        style: 'width:100%', // 表格宽度
        align: 'center',
        selection: false,
        border: true,
        config: [
          {name: '序号', type: 'index', width: '60px'},
          {id: 'real_name', name: '姓名'},
          {id: 't_id', name: '账号'},
          {id: 'school_title', name: '学校'},
          {id: 'grade_title', name: '年级'},
          {id: 'class_title', name: '班级'},
          {id: 'evaluation_total_time', name: '用时（分钟）'},
          {id: 'finish_status', name: '完成情况'},
          {id: 'ts', name: '完成时间'}
        ]
      },
      tableData: [],
      conditions: {
        plan_id: '',
        school_id: '',
        account: '',
        real_name: '',
        section_id: '',
        grade_id: '',
        class_id: '',
        status: '',
        guidance_note: ''
      },
      completion_rate: 0,
      evaluate_completed_number: 0,
      evaluate_number: 0,
      not_finished_number: 0
    }
  },
  created () {
    this.menuList = sessionStorage.getItem('list')
    var operation = {id: 'operation', name: '操作', list: []}
    if (this.menuList.includes('showSchoolRepEva')) {
      var operation1 = {id: 'details', name: '查看报告'}
      operation.list.push(operation1)
    }
    if (this.menuList.includes('downLoadRepEva')) {
      var operation2 = {id: 'download', name: '下载报告'}
      operation.list.push(operation2)
    }
    this.tableConfig.config.push(operation)
    this.Api = downloadApi
    this.conditions.plan_id = this.$route.query.id
    this.id = this.$route.query.id
    this.schoolId = this.$route.query.schoolId
    this.dataList()
    this.sectionOptionsFn()
  },
  methods: {
    sectionOptionsFn () {
      APIGETSECTIONLIST({
        school_id: this.$route.query.schoolId
      }).then((res) => {
        this.sectionOptions = res.data
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    gradeOptionsFn () {
      APIGETGRADELIST({
        section_id: this.conditions.section_id
      }).then((res) => {
        this.gradeOptions = res.data
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    classOptionsFn () {
      APIGETCLASSLIST({
        grade_id: this.conditions.grade_id
      }).then((res) => {
        this.classOptions = res.data
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    goBack () {
      this.$router.push({path: '/schoolPlan'})
    },
    dataList () {
      this.conditions.plan_id = this.$route.query.id
      this.conditions.school_id = this.$route.query.schoolId
      APISCHOOLPLANGETEVALUATIONPROGRESS(this.conditions).then((res) => {
        this.tableData = res.data.list.list
        this.completion_rate = res.data.completion_rate
        this.evaluate_completed_number = res.data.evaluate_completed_number
        this.evaluate_number = res.data.evaluate_number
        this.not_finished_number = res.data.not_finished_number
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    searchFn () {
      this.dataList()
    },
    goToOperation (val) {
      if (val.id === 'download') {
        this.downloadFn(val)
      } else if (val.id === 'details') {
        this.detailsFn(val)
      }
    },
    downloadFn (val) {
      this.dialogVisible2 = true
      this.downloadList = val.rows.sub_list
      this.report_id = val.rows.report_id
    },
    detailsFn (val) { // 平台推荐=>1 自建=>2 单个量表=>3
      this.dialogVisible = true
      this.dialogList = val.rows.sub_list
      if (val.rows.plan_type === 3 || val.rows.plan_type === 2) {
        this.dialogList.forEach(item => {
          if (item.id === 925984) { // 六大兴趣
            item.hrefStr = '/api/report/sixInterest'
          } else if (item.id === 181731) { // 职业价值观
            item.hrefStr = '/api/report/professionalValue'
          } else if (item.id === 132462) { // MBTI
            item.hrefStr = '/api/report/MBTICharacter'
          } else if (item.id === 329235) { // 九大智能高中版
            item.hrefStr = '/api/report/nineSmart'
          } else if (item.id === 689942) { // 九大智能初中版
            item.hrefStr = '/api/report/nineSmart'
          } else if (item.id === 867971) { // 中学生问题解决能力量表
            item.hrefStr = '/api/report/problemSolving'
          } else if (item.id === 756492) { // 中学生沟通能力量表
            item.hrefStr = '/api/report/communicationSkills'
          } else if (item.id === 976297) { // 学生人际合作能力评估报告
            item.hrefStr = '/api/report/InterpersonalCooperation'
          } else { // 单个量表
            item.hrefStr = '/api/report/getIndividualReportView'
          }
          item.report_id = val.rows.report_id
          item.token = window.sessionStorage.getItem('token')
        })
      } else if (val.rows.plan_type === 1) {
        this.dialogList.forEach(item => {
          item.hrefStr = '/api/report/getRecommendIndividualReportView'
          item.report_id = val.rows.report_id
          item.token = window.sessionStorage.getItem('token')
        })
      }
    },
    checkReport (row) {
      window.open(row.hrefStr + '?report_id=' + row.report_id + '&sid=' + row.id + '&token=' + row.token)
      this.dialogVisible = false
    },
    handleClose (done) {
      done()
    },
    downloadListFn (id) {
      APIGETDOWNLOADREPORTPATH({
        report_id: this.report_id,
        sid: id
      }).then((res) => {
        if (res.status === 1) {
          window.location.href = this.Api + res.data.url + '?report_info=' + res.data.report_info
        } else {
          this.$message.error(res.msg)
        }
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    addFn () {
      this.isAddProgress = true
    },
    noAddProgress (val) {
      this.isAddProgress = false
      if (val !== undefined && val.type === 1) {
        this.tableList()
      }
    },
    exportFn () { // 导出
      APISCHOOLPLANCHECKEXPORTUNFINISHED({
        plan_id: this.$route.query.id,
        school_id: this.$route.query.schoolId
      }).then((res) => {
        window.location.href = this.Api + res.data.url + '?plan_info=' + res.data.plan_info
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    }
  }
}
</script>
<style scoped>
.overview{
  width: 100%;
  height: 10vh;
  border: 1px solid #cccccc;
  border-radius: 20px;
  padding: 1vw 1vh;
  box-sizing: border-box;
  margin: 20px 0;
}
.overview>p{
  text-align: right;
}
.overview>p>span{
  font-size: 30px;
}
</style>
